<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="oastaglib" prefix="oas"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Online Attendance System</title>
    <style type="text/css">
    	.leave-type-item {
    		line-height: 25px;
    		display:flex; 
    		flex-direction: row; 
    		justify-content: space-between;
    	}
    	.leave-type-item:hover {
    		background-color: #f0f0f0;
    	}
    	.leave-type-list {
    		display:flex; 
    		flex-direction: column; 
    		width:90%;
    	}
    </style>
    <link rel="stylesheet" type="text/css" href="<c:url value="resources/bootstrap/dist/css/bootstrap.min.css" /> ">
    <script type="text/javascript" src="<c:url value="/resources/js/jquery/dist/jquery.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/resources/bootstrap/dist/js/bootstrap.min.js"/>"></script>
    <script type="text/javascript">   	 	
   	 	function click_update(id, description) {
   	 		console.log(id);
   	 		console.log(description);
   	 		$("#description").attr("value", description);
   	 		$("#update_id").attr("value", id); 	
   	 	}
    </script>
</head>
<body style="background-color:#eeeeee">

	<oas:nav/>
	
 	<oas:content>
		<div style="display:flex; 
			flex-direction: row; 
			justify-content: space-between;
			line-height: 45px;">
			<div>
				<h2>请假类型列表</h2>
			</div>
			<div>
				<a href="javascript:void(0);">返回首页</a>
			</div>
		</div>
		
		<br/>	
		<div style="width:80%; border-left: 5px solid #e0e0e0; padding: 0px 0px 0px 5px">
			<h4>增加一个新的请假类型</h4><br/> 
			
			<c:choose>
				<c:when test="${ not empty message && message == 200 }">
					<div class="alert alert-success alert-dismissable">
						<button type="button" class="close" data-dismiss="alert"
								aria-hidden="true">
							&times;
						</button>
						添加成功！
					</div>
				</c:when>
				<c:when test="${ not empty message && message == 400 }">
					<div class="alert alert-warning alert-dismissable">
						<button type="button" class="close" data-dismiss="alert"
								aria-hidden="true">
							&times;
						</button>
						描述不能为空！
					</div>
				</c:when>
			</c:choose>
			
			<form method="post" action="<c:url value="/leaveTypes/add" />" >
				<div class="form-group col-sm-4"><input class="form-control" type="text" name="description" required="required" placeholder="请输入请假类型描述"></div>
				<br/>
				<div class="form-group col-sm-1"><input class="btn btn-primary" type="submit" value="添加"></div>
			</form>
		</div>
		<br/><br/>
		<div class="leave-type-list">
			<div style="display:flex; 
				flex-direction: row; 
				justify-content: space-between;">
				
				<div style="font-size:22px">
					请假类型描述
				</div>
				<div style="font-size:22px">
					操作
				</div>
			</div>
			<c:choose>
				<c:when test="${ not empty message && message == 201 }">
					<br/>
					<div class="alert alert-success alert-dismissable">
						<button type="button" class="close" data-dismiss="alert"
								aria-hidden="true">
							&times;
						</button>
						修改成功！
					</div>
				</c:when>
				<c:when test="${ not empty message && message == 401 }">
					<br/>
					<div class="alert alert-warning alert-dismissable">
						<button type="button" class="close" data-dismiss="alert"
								aria-hidden="true">
							&times;
						</button>
						修改失败！
					</div>
				</c:when>
			</c:choose>
			<c:forEach items="${paginationSupport.items}" var="leaveType" >
			<hr style="width:100%" />
			<div class="leave-type-item">
				<div style="">
					<c:out value="${ leaveType.description }"></c:out>
				</div>
				<div>
					<a href="<c:url value="/leaveTypes/delete?id=${leaveType.id}"/>" >删除</a>
					<a id="${leaveType.id}"
						onclick='click_update(this.id, "${leaveType.description}")' 
						href="javascript:void(0);" 
						data-toggle="modal" data-target="#updateLeaveType">修改</a>
				</div>
			</div>
			
			</c:forEach>
			<hr style="width:100%" />		
		</div>
		<div>
			每页${paginationSupport.pageSize}条请假类型，  第${paginationSupport.currentPageNo}/${paginationSupport.totalPageCount}页,共${paginationSupport.totalCount}个请假类型
			<ul class="pagination">
				<c:if test="${paginationSupport.previousPage}">
					<li class="page-item">
						<a class="page-link" href="<c:url value="/leaveTypes?pageNo=${paginationSupport.currentPageNo-1}" />" >上一页</a>
					</li>
				</c:if>
				<c:forEach var="i" begin="1" end="${paginationSupport.totalPageCount}" step="1">
					<li class="page-item">
						<a class="page-link" href="<c:url value="/leaveTypes?pageNo=${i}" />" > ${i}</a>
					</li>
				</c:forEach>
				<c:if test="${paginationSupport.nextPage}">
					<li class="page-item">
						<a class="page-link" href="<c:url value="/leaveTypes?pageNo=${paginationSupport.currentPageNo+1}" />" >下一页 </a>
					</li>
				</c:if>
			</ul>
		</div>
		
		<!-- modal -->
		<div class="modal fade" id="updateLeaveType" tabindex="-1" role="dialog" aria-labelledby="updateLeaveType" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="myModalLabel">修改请假类型</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					</div>
					<br/>
					<div class="modal-body">
					请输入修改后的描述
					<br/>
					<form id="leaveTypeForm" action="<c:url value="/leaveTypes/update"/>" method="post">
						<input type="hidden" value="" name="id" id="update_id"/>
						<input type="text" class="form-control" name="description" 
							id="description" style="width:80%" required="required">
						<br/><br/>
						<div class="modal-footer">
							<button type="submit" class="btn btn-primary">提交更改</button>
						</div>
					</form>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</oas:content>
	<oas:footer/>
</body>
</html>
